<template>
  <view class="page" v-if="shenheStatus == 0">
    <view class="page-bg">
      <view></view>
    </view>
    <view class="content">
      <pageHeader :data="data"></pageHeader>

      <view class="page-price">
        <view class="hd">
          <view class="hd-let">
            <view class="em">享受团队人数(人)</view>
            <view
              class="num"
              @click="$utils.toUrl('/shareholder/team/index?type=1')"
              >{{ total || "0" }}</view
            >
          </view>

          <view
            class="hd-rig"
            @click="$utils.toUrl('/shareholder/team/index?type=1')"
          >
            <view class="em">
              查看团队
              <i class="iconfont icon-arrow-right"></i>
            </view>
          </view>
        </view>
      </view>

      <view class="page-price">
        <view class="hd">
          <view class="hd-let">
            <view class="em">出局老板人数(人)</view>
            <view
              class="num"
              @click="$utils.toUrl('/shareholder/team/index?type=2')"
              >{{ parent_count || "0" }}</view
            >
          </view>

          <view
            class="hd-rig"
            @click="$utils.toUrl('/shareholder/team/index?type=2')"
          >
            <view class="em">
              查看详情
              <i class="iconfont icon-arrow-right"></i>
            </view>
          </view>
        </view>
      </view>

      <view class="page-proffer">
        <view class="tit">
          <view>贡献</view>
          <view class="em">被贡献者：平台</view>
        </view>

        <view class="list">
          <view class="item" v-for="(item, index) of list" :key="index">
            <image :src="item.avatar" mode="aspectFill"></image>
            <view class="item-rig">
              <view class="name">{{ item.name }}</view>
              <view class="des">贡献{{ index + 1 }}号位</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import pageHeader from "../components/page-header.vue";
import { getTeamInfo } from "../api/index";

export default {
  components: {
    pageHeader,
    Shenhe,
  },

  data() {
    return {
      data: null,
      list: [],
      page: 1,
      total: 0,
      parent_count: 0,
    };
  },

  onLoad() {
    this.getTeamInfo();
  },

  methods: {
    async getTeamInfo() {
      try {
        const res = await getTeamInfo();
        if (!res.code) {
          let { avatar, id, level_name, name, team_count, team, parent_count } =
            res.data;
          this.data = {
            avatar,
            id,
            level_name,
            name,
          };
          this.list = team;
          this.total = team_count;
          this.parent_count = parent_count;
        }
      } catch (error) {
        uni.showToast({
          title: error,
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding: 0rpx 24rpx 60rpx;
}

.content {
  position: relative;
  z-index: 3;
}

.page-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 152rpx;
  background: #f0250e;

  view {
    height: 124rpx;
    background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
  }
}
.page-price {
  margin-bottom: 24rpx;
  padding: 48rpx 52rpx;
  border-radius: 0px 0px 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;

  .hd {
    display: flex;
  }

  .hd-let {
    flex: 1;
    overflow: hidden;
  }

  .hd-rig {
    padding-top: 4rpx;
  }

  .em {
    display: flex;
    align-items: center;
    padding-bottom: 4rpx;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 68rpx;
    color: #262626;
    font-weight: bold;
  }
}

.iconfont {
  font-size: 16rpx;
  color: #8c8c8c;
}

.page-proffer {
  padding: 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    font-weight: bold;
    color: #262626;

    .em {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }

  .list {
    display: flex;

    .item {
      padding: 28rpx 0 8rpx;
      width: 50%;
      text-align: center;
      display: flex;
    }

    .name {
      padding-bottom: 8rpx;
      font-weight: bold;
      font-size: 40rpx;
      color: #262626;
    }

    .des {
      color: #8c8c8c;
    }

    image {
      margin-right: 30rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 32px;
    }

    .item-rig {
      flex: 1;
      overflow: hidden;
      text-align: left;
    }
  }
}
</style>
